<template>
    <div class="sortBox">
        <div v-for="dt in lists" :key="dt.id" class="item" :class='{"cur":orderField==dt.id,"noShow":dt.noShow}' @click="getData(dt.id)">
            {{dt.name}}
            <span>
                <i class="iconfont icon-shangjiantou" :class="{'select':orderField==dt.id && orderType=='asc'}"></i>
                <i class="iconfont icon-xiajiantou xia" :class="{'select':orderField==dt.id && orderType=='desc'}"></i>
            </span>
        </div>
    </div>
</template>

<script>
import { reactive,toRefs,getCurrentInstance } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
export default {
    props:{
        lists:Array
    },
    components:{
        
    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()

        const state = reactive({
            orderField:1,
            orderType:'desc'  // desc降序，asc升序
        })

        const getData = (flag)=>{
            state.orderField = flag
            state.orderType = (state.orderType=='desc'?'asc':'desc')
            context.emit('change',{orderField:state.orderField,orderType:state.orderType})
        }

        return{
            ...toRefs(state),
            getData
        }
    }
}
</script>

<style lang="scss" scoped>
    .sortBox{
        display: inline-block;
        height: 50px;
        line-height: 50px;
        //color: #67F8FF;
        color: #C1CDE5;
        .item{
            display: inline-block;
            position: relative;
            z-index: 4;
            font-size: 24px;
            padding: 0 20px 0 0;
            font-weight: 500;
            font-family: Poppins-Medium, Poppins;
            &.cur{
                color: #67F8FF;
            }
            &.noShow{
                padding-right: 0;
                span{
                    display: none;
                }
            }
            &+.item{
                margin-left: 30px;
            }
            i{
                position: absolute;
                top:-6px;
                right: 0;
                font-size: 16px;
                transform: scale(.7);
                -webkit-transform: scale(.7);
                color: #c6cedf;
                &.xia{
                    top: auto;
                    bottom: -6px;
                }
                &.select{
                   color: #67F8FF; 
                }
            }
        }
    }
</style>